<template>
	<view>
		<view id="mui-video"></view>
		<!--<view class="buttons" v-show="isShow">
			<u-icon name="play-right-fill" color="rgba(255, 255, 255, 0.8)" :size="60"></u-icon>
		</view>-->

	</view>
</template>

<script>
	import 'mui-player/dist/mui-player.min.css'
	import MuiPlayer from 'mui-player'
	import Hls from 'hls.js'
	//import Flv from 'flv.js'

	export default {
		name: "xp-muiplayer",
		props: {
			//播放器高度

			// 播放标题
			title: {
				type: String,
				default: ''
			},
			// 播放地址
			src: {
				type: String,
				default: ''
			},
			// 播放格式

			// 自动播放
			autoplay: {
				type: Boolean,
				default: true
			},
			// 循环播放
			loop: {
				type: Boolean,
				default: false
			},
			// 静音播放

			// 播放器容器是否自适应视频高度
			autoFit: {
				type: Boolean,
				default: false
			},
			// 直播模式
			live: {
				type: Boolean,
				default: false
			},
			// 封面地址
			poster: {
				type: String,
				default: ''
			},
			objectFit: {
				type: String,
				default: 'cover'
			}
		},
		data() {
			return {
				mui_video: null,
				parse: {},
				muted: true,
				height: '800px',
				isShow: true,
				type: 'm3u8'

			};
		},
		watch: {
			// 播放地址变化
			src(newVal, oldVal) {
				console.log("000")
				this.mui_video.destroy()
				console.log(newVal, oldVal)
				if (this.mui_video != null) {

					this.src = newVal
					//this.mui_video.src = newVal
					//this.mui_video.reloadUrl(newVal)
					this.init()
					this.isShow = false
					this.mui_video.video().setAttribute('playsinline', 'true');
					this.mui_video.video().setAttribute('webkit-playsinline', 'true'); // 针对苹果设备的兼容性设置
				}
			},
			// 播放格式变化
			type(newVal, oldVal) {

				console.log(newVal, oldVal)
				this.mui_video.destroy()
				if (newVal == 'mp4') {
					this.parse = {}
				}

				if (newVal == 'm3u8') {
					this.parse = {
						type: 'hls',
						loader: Hls,
						config: {
							// hls config to：https://github.com/video-dev/hls.js/blob/HEAD/docs/API.md#fine-tuning
							debug: false,
						},
					}
				}


				// 重置播放器
				this.init()
			}
		},
		mounted() {
			//this.type = this.getFileFormat(this.src)
			//console.log("this",this.type)
			const self = this
			uni.$on('destroy', function() {
				console.log("222")
				self.src = ''
				self.mui_video = null
			})
			uni.$on('hidecc', function() {

				console.log("222")
				self.ccc()
			})
			if (!this.src) {
				this.isShow = true
			} else {
				this.isShow = false
			}

			//console.log("当前type", this.type)
			if (this.type == 'mp4') {
				this.parse = {}
			}

			if (this.type == 'm3u8') {
				this.parse = {
					type: 'hls',
					loader: Hls,
					config: {
						// hls config to：https://github.com/video-dev/hls.js/blob/HEAD/docs/API.md#fine-tuning
						debug: false,
					},
				}
			}

			this.init()

			setTimeout(function(){
				//self.bbb()
			},1000)
			//console.log("组件里获取到的", this.hieght)
			

		},
		onHide() {
			//console.log("暂停")


		},
		onLoad() {
			const self = this
			uni.$on('destroy', function() {
				//console.log("收到，已销毁播放器", self.src)
				self.src = ''
			})
			uni.$on('hidecc', function() {
				console.log("收到，已暂停播放器")
				self.ccc()
			})
		},
		methods: {
			cloes() {

				this.init()
				console.log("sss", this.mui_video)
			},
			hasNoQueryParams(url, type) {
				return !url.includes(type);
			},
			getFileFormat(url) {
				console.log("====", url)
				if (this.hasNoQueryParams(url, '.mp4')) {
					return 'mp4';
				} else if (this.hasNoQueryParams(url, '.m3u8')) {
					return 'm3u8';
				} else {
					return 'unknown';
				}
			},
			ccc() {
					console.log("已经操作暂停事件了")
				this.mui_video.video().pause()
			},
			bbb() {
				//	console.log("已经操作播放事件了")
				this.mui_video.video().play()
			},
			    simulateClick(selector) {
			      // 创建选择器查询
			      const query = uni.createSelectorQuery().in(this);
			      // 选择我们想要点击的节点
			      query.select(selector).boundingClientRect(data => {
			        if (data) {
			          // 模拟点击事件
			          let touch = {};
			          touch.x = data.left + data.width / 2;
			          touch.y = data.top + data.height / 2;
			          let event = {
			            touches: [touch],
			          };
			          // 触发tap事件
			          this.$emit('tap', event);
			        }
			      }).exec();
			    },
			init() {
				//	console.log("组件里获取到的", this.hieght)
				this.mui_video = null
				const self = this

				uni.getSystemInfo({
					success: function(info) {
						console.log("info", info.windowHeight)
						self.height = info.windowHeight - 60 + 'px'
					}
				})
				//console.log("设备高度",this.height)
				this.mui_video = new MuiPlayer({
					container: '#mui-video',
					title: this.title,
					// 设置个默认地址 否则会弹出视频为空
					src: this.src,
					//src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
					autoplay: this.autoplay,
					autoFit: this.autoFit,
					loop: this.loop,
					muted: this.muted,
					live: this.live,
					poster: this.poster,
					height: this.height,
					parse: this.parse,
					objectFit: 'cover'
				})
				this.mui_video.on('ready', function(e) {
					console.log('视频初始化成功', e);

					console.log(self.mui_video.video())
					// self.mui_video.video().muted=false
					// 重新加载URL（指定一个视频地址重新加载资源，不传参则默认重新加载）\

				});
				this.mui_video.video().setAttribute('control','true');
				this.mui_video.video().setAttribute('playsinline', 'true');
				this.mui_video.video().setAttribute('webkit-playsinline', 'true'); // 针对苹果设备的兼容性设置

				this.mui_video.video().addEventListener('click', function(event) {
						console.log('事件捕获', self.isShow);
					if (self.isShow) {
						self.isShow = false
						self.bbb()
							console.log('播放', self.isShow);
					} else {
						self.isShow = true
						self.ccc()
								console.log('暂停', self.isShow);
					}

				}, true);
				this.mui_video.video().addEventListener('timeupdate', function(e) {

					//console.log(this.mui_video.video().timeupdate())
					// console.log("888")
				})
				this.mui_video.video().addEventListener('ended', function(e) {
					//	console.log("播放结束");
					self.$emit('videoEnd', true)
				})
				this.mui_video.video().addEventListener('pause', function(e) {
					console.log("播放暂停", e)
                     e.target.muted=false
						self.isShow = true
					//console.log(this.mui_video.video().timeupdate())
				})
				this.mui_video.video().addEventListener('play', function(e) {
					console.log("播放监听", e)
					self.simulateClick('#mui_video');
					//setTimeout(function(){
				//		console.log("关闭播放监听")
						e.target.muted=false
					//},2000)
						self.isShow = false
						e.target.requestFullscreen=null
					 //e.target.disablePictureInPicture=true	
					e.target.playsInline=true	

					//console.log(this.mui_video.video().timeupdate())
				})
				this.mui_video.video().addEventListener('error', function(e) {
					console.log("错误监听", e)

				})
				//durationchange
				this.mui_video.video().addEventListener('duration-change', function(e) {
						console.log("新的", e)
						//e.target.muted=false
					//console.log(this.mui_video.video().timeupdate())
				})
				this.mui_video.video().addEventListener("seeked", e => {
					console.log("进度条变化",e)
					
				})
				this.mui_video.video().style.objectFit = 'fill'

			}
		}
	}
</script>

<style scoped>
	::v-deep .mplayer-header {
		display: none;
	}

	.buttons {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 1;
		transform: translate(-50%, -50%);
		pointer-events: none;
	}
</style>